<sqx-layout layout="right" overflow="true" padding="true" titleText="i18n:common.workflow" white="true" width="20">
    <ng-container>
        <div class="section mb-2">
            <label for="id">{{ "common.id" | sqxTranslate }}</label>
            <div class="input-group">
                <input class="form-control" id="id" #inputId name="id" readonly value="{{ content.id }}" />
                <button class="btn btn-outline-secondary" [sqxCopy]="inputId" type="button">
                    <i class="icon-copy"></i>
                </button>
            </div>
        </div>

        <div class="section mb-4">
            <label for="version">{{ "common.version" | sqxTranslate }}</label
            >: <span id="version">{{ content.version }}</span>
        </div>

        @if (content.canDraftCreate || content.canDraftDelete) {
            <div class="section mb-4">
                @if (!content.newStatus) {
                    <button class="btn btn-success btn-block" (click)="createDraft()">{{ "contents.draftNew" | sqxTranslate }}</button>
                } @else {
                    <label>{{ "contents.draftStatus" | sqxTranslate }}</label>
                    <button
                        class="btn btn-outline-secondary btn-block btn-status"
                        #buttonOptions
                        (click)="dropdownNew.toggle()"
                        sqxTourStep="status"
                        type="button">
                        <sqx-content-status
                            layout="multiline"
                            [scheduled]="content.scheduleJob"
                            [status]="content.newStatus!"
                            [statusColor]="content.newStatusColor!" />
                    </button>
                    <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdownNew; closeAlways: true">
                        @if (content.statusUpdates.length > 0) {
                            @for (info of content.statusUpdates; track info) {
                                <a class="dropdown-item" (click)="changeStatus(info.status)">
                                    {{ "common.statusChangeTo" | sqxTranslate }}
                                    <i class="icon-circle icon-sm" [style.color]="info.color"></i> {{ info.status }}
                                </a>
                            }

                            <div class="dropdown-divider"></div>
                        }
                        <a
                            class="dropdown-item dropdown-item-delete"
                            [class.disabled]="!content.canDraftDelete"
                            confirmRememberKey="deleteDraft"
                            confirmText="i18n:contents.deleteVersionConfirmText"
                            confirmTitle="i18n:contents.deleteConfirmTitle"
                            (sqxConfirmClick)="deleteDraft()">
                            {{ "contents.versionDelete" | sqxTranslate }}
                        </a>
                        <div class="dropdown-divider"></div>
                        <a
                            class="dropdown-item dropdown-item-delete"
                            [class.disabled]="!content.canDelete"
                            confirmRememberKey="deleteContent"
                            confirmText="i18n:contents.deleteConfirmText"
                            confirmTitle="i18n:contents.deleteConfirmTitle"
                            (sqxConfirmClick)="delete()">
                            {{ "common.delete" | sqxTranslate }}
                        </a>
                    </sqx-dropdown-menu>
                }
            </div>
        }

        <div class="section">
            <label>{{ "contents.currentStatusLabel" | sqxTranslate }}</label>
            @if (!content.newStatus) {
                <div>
                    <button
                        class="btn btn-outline-secondary btn-block btn-status"
                        #buttonOptions
                        (click)="dropdown.toggle()"
                        sqxTourStep="status"
                        type="button">
                        <sqx-content-status
                            layout="multiline"
                            [scheduled]="content.scheduleJob"
                            small="true"
                            [status]="content.status"
                            [statusColor]="content.statusColor" />
                    </button>
                    <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                        @if (content.statusUpdates.length > 0) {
                            @for (info of content.statusUpdates; track info) {
                                <a class="dropdown-item" (click)="changeStatus(info.status)">
                                    {{ "common.statusChangeTo" | sqxTranslate }}
                                    <sqx-content-status layout="text" small="true" [status]="info.status" [statusColor]="info.color" />
                                </a>
                            }

                            <div class="dropdown-divider"></div>
                        }
                        <a
                            class="dropdown-item dropdown-item-delete"
                            [class.disabled]="!content.canCancelStatus"
                            confirmRememberKey="cancelStatus"
                            confirmText="i18n:contents.cancelStatusConfirmText"
                            confirmTitle="i18n:contents.cancelStatusConfirmTitle"
                            (sqxConfirmClick)="cancelStatus()">
                            {{ "contents.cancelStatus" | sqxTranslate }}
                        </a>
                        <div class="dropdown-divider"></div>
                        <a
                            class="dropdown-item dropdown-item-delete"
                            [class.disabled]="!content.canDelete"
                            confirmRememberKey="deleteContent"
                            confirmText="i18n:contents.deleteConfirmText"
                            confirmTitle="i18n:contents.deleteConfirmTitle"
                            (sqxConfirmClick)="delete()">
                            {{ "common.delete" | sqxTranslate }}
                        </a>
                    </sqx-dropdown-menu>
                </div>
            } @else {
                <button class="btn btn-outline-secondary btn-block btn-status" type="button">
                    <sqx-content-status layout="multiline" [status]="content.status" [statusColor]="content.statusColor" />
                </button>
            }
            <sqx-form-hint marginTop="1"> {{ "contents.lastUpdatedLabel" | sqxTranslate }}: {{ content.lastModified | sqxFromNow }} </sqx-form-hint>
        </div>

        <div class="section">
            <h3 class="bordered">{{ "common.history" | sqxTranslate }}</h3>

            @for (event of contentEvents | async; track event.eventId) {
                <sqx-content-event [content]="content" (dataCompare)="compareVersion(event)" (dataLoad)="loadVersion(event)" [event]="event" />
            }
        </div>
    </ng-container>
</sqx-layout>
<sqx-due-time-selector #dueTimeSelector [disabled]="disableScheduler" />
